<template>
  <div>
    <el-form ref="formRef" :model="form" size="small" label-width="60" :show-message="false">
      <el-row :gutter="8">
        <el-col :span="6">
          <el-form-item label="用户名称" prop="userName">
            <el-input placeholder="请输入" v-model="form.userName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="操作时间" prop="roleName">
            <c-date-picker v-model:start-time="form.startTime" v-model:end-time="form.endTime"></c-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="操作类型" prop="doneTypeId">
            <el-select v-model="form.doneTypeId" placeholder="请选择" size="small" clearable>
              <el-option v-for="item in doneTypeList" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col class="el-col-auto">
          <el-form-item>
            <el-button type="primary" @click="search">搜索</el-button>
            <el-button @click="reset">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <vxe-grid ref="gridRef" v-bind="gridOptions"></vxe-grid>
  </div>
</template>

<script setup lang="ts">
import '@/styles/common.scss'
import { reactive, ref } from 'vue'
import { http } from '@/plugins/axios'
import type { VxeGridInstance, VxeGridProps } from 'vxe-table'
import { GRID_BASE_CONFIG } from '@/plugins/vxe-table'

const form = reactive({
  userName: '',
  doneTypeId: '',
  startTime: '',
  endTime: ''
})

const doneTypeList: { label: string, value: any }[] = reactive([])

const gridRef = ref<VxeGridInstance<any>>()

const gridOptions = reactive<VxeGridProps<any>>({
  ...GRID_BASE_CONFIG,
  pagerConfig: {
    currentPage: 1,
    pageSize: 10
  },
  proxyConfig: {
    ajax: {
      query: ({ page }) => {
        return getData(page.currentPage, page.pageSize)
      }
    },
    response: {
      result: 'data',
      total: 'count'
    }
  },
  columns: [
    { type: 'seq', title: '序号', width: 70 },
    { field: 'user_name', title: '用户名称', width: 100 },
    { field: 'done_time', title: '操作时间', width: 200 },
    { field: 'done_type_name', title: '操作类型' }
  ]
})

function getData(page: number, pageSize: number) {
  return new Promise((resolve, reject) => {
    const params = {
      userName: form.userName,
      startTime: form.startTime,
      endTime: form.endTime,
      doneTypeId: form.doneTypeId || '',
      page,
      pageSize
    }
    return http({
      url: '/api/log/getLogList',
      params
    })
      .then((res: any) => {
        resolve(res)
      })
      .catch(() => {
        reject()
      })
  })
}

/** 获取操作类型列表 */
function getLogTypeList() {
  const params = {}
  http({
    url: '/api/log/getLogTypeList',
    params
  })
    .then((res: any) => {
      res.data.forEach((item: any) => {
        doneTypeList.push({
          label: item.done_type_name,
          value: item.done_type_id
        })
      })
    })
    .catch(() => { })
}

getLogTypeList()

function search() {
  const $grid = gridRef.value
  if ($grid) {
    $grid.commitProxy('reload')
  }
}
function reset() {
  form.userName = ''
  form.doneTypeId = ''
  form.startTime = ''
  form.endTime = ''
}
</script>

<style lang="scss" scoped></style>
